<template>
  <div style="padding-bottom:40px;padding-top:20px" v-if="zfNameflag">
    <div style="padding:0px 20px;">
      <parklist :getParkCodeOnly="parkChange" :getParkNameMap="getParkName"></parklist>
    </div>
    <div class="subject">
      <div class="tab" style="margin-top: 0px;">
        <div class="Unit">
          <div class="Unit-title">环保实时报警</div>
          <div style="margin-bottom: 20px;">
            <el-date-picker
              style="width:140px;color:#fff;"
              size="small"
              v-model="realtimeMonth"
              type="month"
              :picker-options="pickerOptions"
              :clearable="false"
              :editable="false"
              value-format="yyyyMM"
              @change="realtimeMonthChange"
              placeholder="请选择时间">
            </el-date-picker>
          </div>
          <div class="warnControll_charts" style="padding-bottom: 38px;">
            <el-table :data="realTimeAlarm"
                class="customer-table"
                :row-style="{height:'32px'}"
                :cell-style="addclass"
                style="width: 100%"
                height="370px"
                :header-cell-style="{background:'#F7F8FA', color: '#333333'}"
                @cell-click="realTimeAlarmClick">
              <el-table-column type="index" :index="indexMethod" label="排名" width="70px"></el-table-column>
              <el-table-column prop="entName" :show-overflow-tooltip="true" label="企业名称"></el-table-column>
              <el-table-column prop="proportion" :formatter="formatCount" align="center" :show-overflow-tooltip="true" label="报警数占比"></el-table-column>
              <el-table-column prop="alarmCount" :formatter="formatCount" align="center" :show-overflow-tooltip="true" label="报警数"></el-table-column>
            </el-table>
          </div>
        </div>
        <div class="Unit">
          <div class="Unit-title">环保报警</div>
          <div style="margin-bottom: 20px;">
            <el-date-picker
              style="width:140px;color:#fff;"
              size="small"
              v-model="alarmMonth"
              type="month"
              :picker-options="pickerOptions"
              :clearable="false"
              :editable="false"
              value-format="yyyyMM"
              @change="alarmMonthChange"
              placeholder="请选择时间">
            </el-date-picker>
          </div>
          <div class="warnControll_charts" style="padding-bottom: 38px;">
            <el-table :data="environmentalProtectionAlarm"
                class="customer-table"
                :row-style="{height:'32px'}"
                :cell-style="addclass"
                style="width: 100%"
                height="370px"
                :header-cell-style="{background:'#F7F8FA', color: '#333333'}"
                @cell-click="environmentalAlarmClick">
              <el-table-column type="index" :index="indexMethod" label="排名" width="70px"></el-table-column>
              <!-- <el-table-column prop="nameAbbreviation" :show-overflow-tooltip="true" label="园区名称"></el-table-column> -->
              <el-table-column prop="nameAbbreviation" label="园区名称">
                <template scope="scope">
                  <el-tooltip class="item" effect="dark" :content="getNameByAbbreviation(scope.row.nameAbbreviation)" placement="top-start">
                    <span>{{scope.row.nameAbbreviation}}</span>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column prop="proportion" :formatter="formatCount" align="center" :show-overflow-tooltip="true" label="报警数占比"></el-table-column>
              <el-table-column prop="alarmCount" :formatter="formatCount" align="center" :show-overflow-tooltip="true" label="报警数"></el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="subject">
      <div class="tab">
        <div class="Unit">
          <div class="Unit-title">排污总量</div>
          <div style="margin-bottom: 20px;">
            <el-button-group>
              <el-button @click="dischargeTypeChange('')" size="small" :class="dischargeType===''?'primaryButton':''">总量</el-button>
              <el-button @click="dischargeTypeChange('0')" size="small" :class="dischargeType==='0'?'primaryButton':''">废气</el-button>
              <el-button @click="dischargeTypeChange('1')" size="small" :class="dischargeType==='1'?'primaryButton':''">废水</el-button>
            </el-button-group>
          </div>
          <div class="warnControll_charts">
            <el-table :data="totalDischarge"
                class="customer-table"
                :row-style="{height:'32px'}"
                :cell-style="{padding:'0px'}"
                style="width: 100%"
                height="356px"
                :header-cell-style="{background:'#F7F8FA', color: '#333333'}">
              <el-table-column type="index" :index="indexMethod" label="排名" width="70px"></el-table-column>
              <el-table-column prop="name" :show-overflow-tooltip="true" label="园区名称"></el-table-column>
              <el-table-column prop="deviceCount" :formatter="formatCount" align="center" :show-overflow-tooltip="true" label="排污量"></el-table-column>
            </el-table>
          </div>
        </div>
        <div class="Unit">
          <div class="Unit-title">设备统计</div>
          <div style="margin-bottom: 20px;">
            <el-button-group>
              <el-button @click="equipmentTypeChange('')" size="small" :class="equipmentType===''?'primaryButton':''">全部</el-button>
              <el-button @click="equipmentTypeChange('0')" size="small" :class="equipmentType==='0'?'primaryButton':''">在线设备</el-button>
              <el-button @click="equipmentTypeChange('1')" size="small" :class="equipmentType==='1'?'primaryButton':''">离线设备</el-button>
            </el-button-group>
          </div>
          <div class="warnControll_charts">
            <el-table :data="equipmentStatistics"
                class="customer-table"
                :row-style="{height:'32px'}"
                :cell-style="{padding:'0px'}"
                style="width: 100%"
                height="320px"
                :header-cell-style="{background:'#F7F8FA', color: '#333333'}">
              <el-table-column type="index" :index="indexMethod" label="排名" width="70px"></el-table-column>
              <el-table-column prop="nameAbbreviation" :show-overflow-tooltip="true" label="园区名称"></el-table-column>
              <el-table-column prop="deviceCount" :formatter="formatCount" align="center" :show-overflow-tooltip="true" label="设备数"></el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div> -->
    <div class="subject">
      <div class="tab">
        <div class="Unit">
          <div class="Unit-title">空气质量比</div>
          <div class="Unit-tab">
            <div class="majorHazardAnalysis_charts">
              <div id="annular1" ref="annular1" style="width:100%;height:370px"></div>
            </div>
          </div>
        </div>
        <div class="Unit">
          <div class="Unit-title">空气质量</div>
          <div style="margin-bottom: 20px;">
            <el-date-picker
              style="width:140px;color:#fff;"
              size="small"
              v-model="airMonth"
              type="month"
              :picker-options="pickerOptions"
              :clearable="false"
              :editable="false"
              value-format="yyyyMM"
              @change="airMonthChange"
              placeholder="请选择时间">
            </el-date-picker>
          </div>
          <div class="warnControll_charts">
            <el-table :data="parkAirQuality"
                class="customer-table"
                :row-style="{height:'32px'}"
                :cell-style="addclass"
                style="width: 100%"
                height="370px"
                :header-cell-style="{background:'#F7F8FA', color: '#333333'}"
                @cell-click="airQualityClick">
              <el-table-column type="index" :index="indexMethod" label="排名" width="70px"></el-table-column>
              <!-- <el-table-column prop="nameAbbreviation" :show-overflow-tooltip="true" label="园区名称"></el-table-column> -->
              <el-table-column prop="nameAbbreviation" label="园区名称">
                <template scope="scope">
                  <el-tooltip class="item" effect="dark" :content="getNameByAbbreviation(scope.row.nameAbbreviation)" placement="top-start">
                    <span>{{scope.row.nameAbbreviation}}</span>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column prop="proportion" :formatter="formatCount" align="center" :show-overflow-tooltip="true" label="优良天数占比"></el-table-column>
              <el-table-column prop="aqiCount" :formatter="formatCount" align="center" :show-overflow-tooltip="true" label="优良天数"></el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <div class="subject">
      <div class="tab">
        <div class="Unit">
          <div class="Unit-title">水质量比</div>
          <div class="Unit-tab">
            <div class="majorHazardAnalysis_charts">
              <div id="annular2" ref="annular2" style="width:100%;height:370px"></div>
            </div>
          </div>
        </div>
        <div class="Unit">
          <div class="Unit-title">水质量</div>
          <div class="warnControll_charts">
            <el-table :data="parkWaterQuality"
                class="customer-table"
                :row-style="{height:'32px'}"
                :cell-style="{padding:'0px'}"
                style="width: 100%"
                height="370px"
                :header-cell-style="{background:'#F7F8FA', color: '#333333'}">
              <el-table-column type="index" :index="indexMethod" label="排名" width="70px"></el-table-column>
              <!-- <el-table-column prop="name" :show-overflow-tooltip="true" label="园区名称"></el-table-column> -->
              <el-table-column prop="name" label="园区名称">
                <template scope="scope">
                  <el-tooltip class="item" effect="dark" :content="getNameByAbbreviation(scope.row.name)" placement="top-start">
                    <span>{{scope.row.name}}</span>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column prop="proportion" :formatter="formatCount" align="center" :show-overflow-tooltip="true" label="较好系数占比"></el-table-column>
              <el-table-column prop="aqiCount" :formatter="formatCount" align="center" :show-overflow-tooltip="true" label="较好系数"></el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <el-dialog :visible.sync="dialogTableVisible" :title="dialogTitle" center>
      <el-table :data="gridData"
          class="customer-table"
          :row-style="{height:'32px'}"
          :cell-style="{padding:'0px'}"
          style="width: 100%;margin-bottom: 20px;"
          height="370px"
          :header-cell-style="{background:'#F7F8FA', color: '#333333'}">
        <el-table-column v-if="detailPartType === 'environmentalAlarm'" property="entName" :show-overflow-tooltip="true" label="企业名称"></el-table-column>
        <el-table-column v-if="detailPartType === 'realTimeAlarm' || detailPartType === 'environmentalAlarm'" property="alarmType" :show-overflow-tooltip="true" label="报警类型"></el-table-column>
        <el-table-column v-if="detailPartType === 'realTimeAlarm' || detailPartType === 'environmentalAlarm'" property="alarmStatus" :show-overflow-tooltip="true" label="报警状态"></el-table-column>

        <el-table-column v-if="detailPartType === 'airQuality'" property="pm25" :show-overflow-tooltip="true" label="PM2.5"></el-table-column>
        <el-table-column v-if="detailPartType === 'airQuality'" property="pm10" :show-overflow-tooltip="true" label="PM10"></el-table-column>
        <el-table-column v-if="detailPartType === 'airQuality'" property="o3" :show-overflow-tooltip="true" label="臭氧"></el-table-column>
        <el-table-column v-if="detailPartType === 'airQuality'" property="co" :show-overflow-tooltip="true" label="一氧化碳"></el-table-column>
        <el-table-column v-if="detailPartType === 'airQuality'" property="so2" :show-overflow-tooltip="true" label="二氧化硫"></el-table-column>
        <el-table-column v-if="detailPartType === 'airQuality'" property="no2" :show-overflow-tooltip="true" label="二氧化氮"></el-table-column>
        <el-table-column property="createdAt" :show-overflow-tooltip="true" label="事件时间" width="180px"></el-table-column>
      </el-table>
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="page"
        :page-size="limit"
        background
        layout="prev, pager, next"
        :total="total"
        style="text-align: center;">
      </el-pagination>
    </el-dialog>
  </div>
</template>

<script>
import parklist from '@/components/parklist'
import dd from 'gdt-jsapi';
const echarts = require('echarts')
export default {
  components: { parklist },
  name: 'environmental',
  data () {
    return {
      parkNameMap: new Map(),
      dialogTitle: '',
      total: 0,
      limit: 10,
      page: 1,
      detailParkCode: '',
      detailPartType: '',
      detailColumnName: '',
      gridData: [],
      dialogTableVisible: false,
      zfNameflag: true,

      realTimeAlarm: [], // 环保实时报警
      environmentalProtectionAlarm: [], // 环保报警
      totalDischarge: [], // 排污总量
      equipmentStatistics: [], // 设备统计
      airQualityRatio: [], // 空气质量比
      parkAirQuality: [], // 园区空气质量
      waterQualityRatio: [], // 水质量比
      parkWaterQuality: [], // 水质量

      equipmentType: '', // 设备统计：空：全部，0：在线  1：离线
      dischargeType: '', // 排污总量

      realtimeMonth: '',
      alarmMonth: '',
      airMonth: '',
      pickerOptions: {
        disabledDate: time => {
          return time.getTime() > new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0)
        }
      },

      myChart1: {},
      myChart2: {},
      option1: {},
      option2: {},
      option1Data: [],
      option2Data: []
    }
  },
  // created () {
  //   if (dd !== undefined) {
  //     dd.getAuthCode({}).then(res =>{
  //       if (res) {
  //         let params = {
  //           applicationFlag: '20',
  //           authCode: res.auth_code
  //         }
  //         this.$http.post(`/home/sys/loginfree/authentication`, params)
  //           .then(({ data: res }) => {
  //             console.log('res2:',res);
  //             this.$store.commit('zfName', res.data.lastName)
  //             if (res.code !== 0) {
  //               this.zfNameflag = false
  //             }
  //           }).catch(() => {
  //             this.zfNameflag = false
  //           })
  //       }
  //     }).catch(() => {
  //       this.zfNameflag = false
  //     })
  //   } else {
  //     this.$message.error('请在浙政钉环境下浏览该页面！');
  //   }
  // },
  mounted () {
    this.initDate()
    this.renderMyChart1()
    this.renderMyChart2()
    window.onresize = () => {
      this.myChart1.resize()
      this.myChart2.resize()
    }
    this.getData()
  },
  methods: {
    getParkName (map) {
      this.parkNameMap = map
    },
    getNameByAbbreviation (key) {
      return this.parkNameMap.get(key)
    },
    // 切换园区
    parkChange (data) {
      this.$http.get(`/home/chemical/parkInfo/selectParkAll`, {}
      ).then(({ data: res }) => {
        res.data.forEach(item => {
          if (item.code === data) {
            sessionStorage.setItem('routeName1', item.nameAbbreviation)
            this.$router.push({
              name: 'zfEnvironmentalProtectionDetail',
              query: {
                data: data
              }
            })
          }
        })
      })
    },
    initDate () {
      let today = new Date()
      let year = today.getFullYear() + ''
      let month = today.getMonth() + 1
      month = month < 10 ? '0' + month : '' + month
      this.realtimeMonth = year + month
      this.alarmMonth = year + month
      this.airMonth = year + month
    },
    addclass (value) {
      if (value.column.label === '报警数' || value.column.label === '优良天数') {
        return { color: '#1492FF', padding: '0px' }
      } else {
        return { padding: '0px' }
      }
    },
    formatCount (row, column, cellValue, index) {
      if (cellValue && cellValue !== '' && cellValue !== '0.00%' && cellValue !== 'NaN%') {
        return cellValue
      } else {
        return '—'
      }
    },
    getData () {
      this.$http.post(`/home/chemical/parkInfo/getEnvironmentalProtection`,
        {
          EquipmentStatistics: this.equipmentType
        }
      ).then(({ data: res }) => {
        if (res.code === 0) {
          let realTimeAlarmTotal = res.data.RealTimeAlarm.reduce(
            (acc, current) => acc + current.alarmCount, 0
          )
          res.data.RealTimeAlarm.forEach((item) => {
            this.realTimeAlarm.push({
              entName: item.entName,
              entCode: item.entCode,
              alarmCount: item.alarmCount,
              proportion: ((item.alarmCount / realTimeAlarmTotal) * 100).toFixed(2) + '%'
            })
          })

          let environmentalProtectionAlarmTotal = res.data.EnvironmentalProtectionAlarm.reduce(
            (acc, current) => acc + current.alarmCount, 0
          )
          res.data.EnvironmentalProtectionAlarm.forEach((item) => {
            this.environmentalProtectionAlarm.push({
              nameAbbreviation: item.nameAbbreviation,
              parkCode: item.parkCode,
              alarmCount: item.alarmCount,
              proportion: ((item.alarmCount / environmentalProtectionAlarmTotal) * 100).toFixed(2) + '%'
            })
          })

          this.totalDischarge = res.data.EffectivePark
          this.equipmentStatistics = res.data.EquipmentStatistics

          let ParkAirQualityTotal = res.data.ParkAirQuality.reduce(
            (acc, current) => acc + current.aqiCount, 0
          )
          res.data.ParkAirQuality.forEach((item) => {
            this.parkAirQuality.push({
              nameAbbreviation: item.nameAbbreviation,
              parkCode: item.parkCode,
              aqiCount: item.aqiCount,
              proportion: ((item.aqiCount / ParkAirQualityTotal) * 100).toFixed(2) + '%'
            })
          })

          this.waterQualityRatio = res.data.WaterQualityRatio

          res.data.EffectivePark.forEach((item) => {
            this.parkWaterQuality.push({
              name: item.name,
              aqiCount: item.aqiCount,
              proportion: '0.00%'
            })
          })

          if (res.data.AirQualityRatio && res.data.AirQualityRatio.length > 0) {
            this.option1Data = res.data.AirQualityRatio.map(item => {
              return {
                value: item.aqiCount,
                name: item.aqiName
              }
            })
          } else {
            this.option1Data = [{
              value: 0,
              name: '暂无数据'
            }]
          }
          this.renderMyChart1()

          if (res.data.WaterQualityRatio && res.data.WaterQualityRatio.length > 0) {
            this.option2Data = res.data.WaterQualityRatio.map(item => {
              return {
                value: item.aqiCount,
                name: item.aqiName
              }
            })
          } else {
            this.option2Data = [{
              value: 0,
              name: '暂无数据'
            }]
          }
          this.renderMyChart2()
        }
      })
    },
    equipmentTypeChange (type) {
      this.equipmentType = type
      this.$http.post(`/home/chemical/parkInfo/getEquipmentStatistics`,
        {
          EquipmentStatistics: this.equipmentType
        }
      ).then(({ data: res }) => {
        if (res.code === 0) {
          this.equipmentStatistics = res.data.EquipmentStatistics
        }
      })
    },
    dischargeTypeChange (type) {
      this.dischargeType = type
    },
    indexMethod (index) {
      return index + 1
    },
    renderMyChart1 () {
      this.myChart1 = echarts.init(document.getElementById('annular1'))
      this.option1 = {
        color: [ '#73FF73', '#FFFF82', '#FFB973', '#FF7373', '#AF7373', '#737373' ],
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '90%',
          left: 'center'
        },
        series: [
          {
            type: 'pie',
            center: ['50%', '40%'],
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center',
              fontSize: '14',
              fontWeight: 'bold',
              formatter: '{c}\n{b}'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.option1Data
          }
        ]
      }
      this.myChart1.setOption(this.option1)
    },
    renderMyChart2 () {
      this.myChart2 = echarts.init(document.getElementById('annular2'))
      this.option2 = {
        color: [ '#73FF73', '#FFFF82', '#FFB973', '#FF7373', '#AF7373', '#737373' ],
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '90%',
          left: 'center'
        },
        series: [
          {
            type: 'pie',
            center: ['50%', '40%'],
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center',
              fontSize: '14',
              fontWeight: 'bold',
              formatter: '{c}\n{b}'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.option2Data
          }
        ]
      }
      this.myChart2.setOption(this.option2)
    },
    // 环保实时报警
    realtimeMonthChange () {
      this.$http.post(`/home/chemical/parkInfo/getRealTimeAlarmByYears`,
        {
          years: '',
          months: this.realtimeMonth
        }
      ).then(({ data: res }) => {
        if (res.code === 0) {
          this.realTimeAlarm = []
          let realTimeAlarmTotal = res.data.RealTimeAlarm.reduce(
            (acc, current) => acc + current.alarmCount, 0
          )
          res.data.RealTimeAlarm.forEach((item) => {
            this.realTimeAlarm.push({
              entName: item.entName,
              entCode: item.entCode,
              alarmCount: item.alarmCount,
              proportion: ((item.alarmCount / realTimeAlarmTotal) * 100).toFixed(2) + '%'
            })
          })
        }
      })
    },
    // 环保报警
    alarmMonthChange () {
      this.$http.post(`/home/chemical/parkInfo/getEnvironmentalListByYears`,
        {
          years: '',
          months: this.alarmMonth
        }
      ).then(({ data: res }) => {
        if (res.code === 0) {
          this.environmentalProtectionAlarm = []
          let environmentalProtectionAlarmTotal = res.data.EnvironmentalProtectionAlarm.reduce(
            (acc, current) => acc + current.alarmCount, 0
          )
          res.data.EnvironmentalProtectionAlarm.forEach((item) => {
            this.environmentalProtectionAlarm.push({
              nameAbbreviation: item.nameAbbreviation,
              alarmCount: item.alarmCount,
              parkCode: item.parkCode,
              proportion: ((item.alarmCount / environmentalProtectionAlarmTotal) * 100).toFixed(2) + '%'
            })
          })
        }
      })
    },
    // 空气质量
    airMonthChange () {
      this.$http.post(`/home/chemical/parkInfo/getParkAirQualityListByYears`,
        {
          years: '',
          months: this.airMonth
        }
      ).then(({ data: res }) => {
        if (res.code === 0) {
          this.parkAirQuality = []
          let ParkAirQualityTotal = res.data.ParkAirQuality.reduce(
            (acc, current) => acc + current.aqiCount, 0
          )
          res.data.ParkAirQuality.forEach((item) => {
            this.parkAirQuality.push({
              nameAbbreviation: item.nameAbbreviation,
              aqiCount: item.aqiCount,
              parkCode: item.parkCode,
              proportion: ((item.aqiCount / ParkAirQualityTotal) * 100).toFixed(2) + '%'
            })

            if (res.data.AirQualityRatio && res.data.AirQualityRatio.length > 0) {
              this.option1Data = res.data.AirQualityRatio.map(item => {
                return {
                  value: item.aqiCount,
                  name: item.aqiName
                }
              })
            } else {
              this.option1Data = [{
                value: 0,
                name: '暂无数据'
              }]
            }
            this.option1.series[0].data = this.option1Data
            this.myChart1.setOption(this.option1)
          })
        }
      })
    },
    realTimeAlarmClick (row, column, cell, event) {
      this.page = 1
      this.gridData = []
      this.dialogTitle = row.entName + '环保实时报警'
      this.dialogTableVisible = true
      this.detailParkCode = row.entCode
      this.detailPartType = 'realTimeAlarm'
      // this.detailColumnName = row.entName
      this.$http.post(`/home/chemical/parkAlarmRecord/getAlarmRecordByParkCodeAndYears`,
        {
          years: '',
          months: this.realtimeMonth,
          entCode: this.detailParkCode,
          limit: this.limit,
          page: this.page
        }
      ).then(({ data: res }) => {
        if (res.code === 0) {
          this.gridData = res.data.data.map(item => {
            return {
              createdAt: item.alarmTime,
              nameAbbreviation: item.entName,
              alarmStatus: item.alarmStatus === 0 ? '未处理' : item.alarmStatus === 1 ? '已处理' : '',
              alarmType: item.alarmTypeName
            }
          })
          this.total = Number(res.data.count)
        }
      })
    },
    environmentalAlarmClick (row, column, cell, event) {
      this.page = 1
      this.gridData = []
      this.dialogTitle = row.nameAbbreviation + '环保报警'
      this.dialogTableVisible = true
      this.detailParkCode = row.parkCode
      this.detailPartType = 'environmentalAlarm'
      // this.detailColumnName = row.nameAbbreviation
      this.$http.post(`/home/chemical/parkAlarmRecord/getAlarmRecordByParkCodeAndYears`,
        {
          years: '',
          months: this.alarmMonth,
          parkCode: this.detailParkCode,
          limit: this.limit,
          page: this.page
        }
      ).then(({ data: res }) => {
        if (res.code === 0) {
          this.gridData = res.data.data.map(item => {
            return {
              createdAt: item.alarmTime,
              nameAbbreviation: item.nameAbbreviation,
              alarmStatus: item.alarmStatus === 0 ? '未处理' : item.alarmStatus === 1 ? '已处理' : '',
              alarmType: item.alarmTypeName,
              entName: item.entName
            }
          })
          this.total = Number(res.data.count)
        }
      })
    },
    airQualityClick (row, column, cell, event) {
      this.page = 1
      this.gridData = []
      this.dialogTitle = row.nameAbbreviation + '空气质量'
      this.dialogTableVisible = true
      this.detailParkCode = row.parkCode
      this.detailPartType = 'airQuality'
      // this.detailColumnName = row.nameAbbreviation
      this.$http.post(`/home/chemical/parkAirQuality/getParkAirQualityListByParkCodeAndYears`,
        {
          years: '',
          months: this.airMonth,
          parkCode: this.detailParkCode,
          limit: this.limit,
          page: this.page
        }
      ).then(({ data: res }) => {
        if (res.code === 0) {
          this.gridData = res.data.data.map(item => {
            return {
              createdAt: item.createTime,
              nameAbbreviation: item.nameAbbreviation,
              pm25: item.pm25,
              pm10: item.pm10,
              o3: item.o3,
              co: item.co,
              so2: item.so2,
              no2: item.no2
            }
          })
          this.total = Number(res.data.count)
        }
      })
    },
    handleCurrentChange (val) {
      this.page = val
      if (this.detailPartType === 'realTimeAlarm') {
        this.$http.post(`/home/chemical/parkAlarmRecord/getAlarmRecordByParkCodeAndYears`,
          {
            years: '',
            months: this.realtimeMonth,
            entCode: this.detailParkCode,
            limit: this.limit,
            page: this.page
          }
        ).then(({ data: res }) => {
          if (res.code === 0) {
            this.gridData = res.data.data.map(item => {
              return {
                createdAt: item.alarmTime,
                nameAbbreviation: item.entName,
                alarmStatus: item.alarmStatus === 0 ? '未处理' : item.alarmStatus === 1 ? '已处理' : '',
                alarmType: item.alarmTypeName
              }
            })
            this.total = Number(res.data.count)
          }
        })
      } else if (this.detailPartType === 'environmentalAlarm') {
        this.$http.post(`/home/chemical/parkAlarmRecord/getAlarmRecordByParkCodeAndYears`,
          {
            years: '',
            months: this.alarmMonth,
            parkCode: this.detailParkCode,
            limit: this.limit,
            page: this.page
          }
        ).then(({ data: res }) => {
          if (res.code === 0) {
            this.gridData = res.data.data.map(item => {
              return {
                createdAt: item.alarmTime,
                nameAbbreviation: item.nameAbbreviation,
                alarmStatus: item.alarmStatus === 0 ? '未处理' : item.alarmStatus === 1 ? '已处理' : '',
                alarmType: item.alarmTypeName,
                entName: item.entName
              }
            })
            this.total = Number(res.data.count)
          }
        })
      } else if (this.detailPartType === 'airQuality') {
        this.$http.post(`/home/chemical/parkAirQuality/getParkAirQualityListByParkCodeAndYears`,
          {
            years: '',
            months: this.airMonth,
            parkCode: this.detailParkCode,
            limit: this.limit,
            page: this.page
          }
        ).then(({ data: res }) => {
          if (res.code === 0) {
            this.gridData = res.data.data.map(item => {
              return {
                createdAt: item.createTime,
                nameAbbreviation: item.nameAbbreviation,
                pm25: item.pm25,
                pm10: item.pm10,
                o3: item.o3,
                co: item.co,
                so2: item.so2,
                no2: item.no2
              }
            })
            this.total = Number(res.data.count)
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.securitybottom {
  .safePersonCount {
    height: 460px;
    background: #FFFFFF;
    border: 1px solid #F0F0F0;
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05);
    border-radius: 4px;
  }
  .safePersonCount_title {
    padding: 20px;
    text-align: center;
  }
  .title_sty{
    font-size: 18px;
    font-weight: 700;
    color: #333333;
  }
  .warnControll {
    height: 460px;
    background: #FFFFFF;
    border: 1px solid #F0F0F0;
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05);
    border-radius: 4px;
  }
  .warnControll_charts {
    width: 100%;
    padding: 0px 40px 10px 40px;
  }
}
.majorHazardAnalysis_charts{
  width: 100%;
  padding: 20px 0px 20px 0px;
}
.subject{
  width: 100%;
  .tab{
    display: flex;
    justify-content:flex-start;
    margin-top: 20px;
    .Unit{
      padding: 0 40px;
      width: 48%;
      background: #FFFFFF;
      border: 1px solid #F0F0F0;
      box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.03);
      margin-left: 1.4%;
      padding-bottom: 20px;
    }
    .matchingCompany{
      padding: 0 12px;
      width: 48%;
      background: #FFFFFF;
      border: 1px solid #F0F0F0;
      box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.03);
    }
  }
}
.Unit-title{
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    padding: 20px;
    color: #333333;
}
.select{
    width: 110px;
    margin-top: 15px;
    margin-left: 40px;
}
.pagination{
    margin-top:20px;
    margin-left:40%;
}
.primaryButton {
  color: #FFFFFF;
  background-color: #1492ff;
  border-color: #1492ff;
}
/deep/ .el-dialog__title {
  font-weight: 700;
  font-size: 16px;
}
/deep/ .el-dialog__footer {
  text-align: center;
}
.el-col-19 {
  margin-top: 4px;
}
</style>
